<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <!-- bower:js -->
  <script src="bower_components/angular/angular.js"></script>
  <!-- endbower -->

  <script src="dist/angular-baidu-map.js"></script>
  <style>
    .map {
      display: block;
      width: 640px;
      height: 480px;
    }
  </style>
</head>
<body ng-app="app" ng-controller="TestController as testCtrl">

  <div ng-init="point = { lng: 121.491, lat: 31.233 }">

    <div>
      <span>lat:</span>
      <span ng-bind="point.lat"></span>
      <input type="number" ng-model="point.lat" />
    </div>

    <div>
      <span>lng:</span>
      <span ng-bind="point.lng"></span>
      <input type="number" ng-model="point.lng" />
    </div>

    <baidu-map class="map" center="point">
      <marker latlng="point" map-click="test()">
        <h1>title</h1>
        <p>你好世界</p>
        <button ng-click="testCtrl.click()">push me</button>
      </marker>
    </baidu-map>

  </div>

  <script>
    angular.module('app', ['ngBaiduMap']).config(config)
      .controller('TestController', TestController);

    function config(baiduMapApiProvider) {
      baiduMapApiProvider.accessKey('Ivgr94UBpL6zkp4lUZRtQCys');
    }

    function TestController($scope) {
      this.click = function() {
        debugger;
      };
    }
  </script>
</body>
</html>
